<template>
	<view class="flex-column px-6 py-6 mx-6 my-6 rounded-6 box-shadow" :class="myClass">
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" class="mx-20" :myClass="myClass" activeColor="#5677fc" color="#333"></me-tabs>
		<view v-if="tabIndex<3" class="flex-row a-center j-sb mt-8 text-black h-20">
			<wyb-button class="btn" width="60rpx" height="60rpx" type="hollow" color="#333" border-size="0" :radius="['1000px']" @click="onClick('back')">
				<uni-icons type="arrowleft" color="" size="24"></uni-icons>
			</wyb-button>
			<text class="fs-28">{{content}}</text>
			<wyb-button v-if="showPre" class="btn" width="60rpx" height="60rpx" type="hollow" color="#333" border-size="0" :radius="['1000px']" @click="onClick('pre')">
				<uni-icons type="arrowright" color="" size="24"></uni-icons>
			</wyb-button>
			<view v-else style="width: 60rpx;"></view>
		</view>
		<view v-else class="mt-8 h-20 flex-row a-center">
			<uni-datetime-picker class="mx-8" v-model="range" type="daterange"
			                rangeSeparator="至" @change="dateChange" :border="false"/>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	import meTabs from '@/components/me-tabs/me-tabs.vue'
	import util from '@/common/utils/string.js'
	export default {
		components: {meTabs},
		name:"lk-date",
		props:{
			myClass: {
				type: String,
				default: 'bg-white'
			}
		},
		data() {
			return {
				tabs:[
						{name:'日'},
						{name:'周'},
						{name:'月'},
						{name:'自定义'}
					],
				tabIndex: 0, // 当前菜单下标
				content: '',
				now: new Date(),
				showPre: false,
				range: []
			};
		},
		created() {
			this.calcDate()
		},
		methods:{
			// 切换菜单
			tabChange (index) {
				if(index<3){
					this.tabIndex = index
					this.calcDate()
				}else{
					
				}
			},
			onClick(type){
				if(type == 'back'){
					switch (this.tabIndex){
						case 0:
							this.now.setDate(this.now.getDate()-1)
							break;
						case 1:
							this.now.setDate(this.now.getDate()-7)
							break;
						case 2:
							this.now.setMonth(this.now.getMonth()-1)
							break;
						default:
							break;
					}
				}else{
					switch (this.tabIndex){
						case 0:
							this.now.setDate(this.now.getDate()+1)
							break;
						case 1:
							this.now.setDate(this.now.getDate()+7)
							break;
						case 2:
							this.now.setMonth(this.now.getMonth()+1)
							break;
						default:
							break;
					}
				}
				this.calcDate()
			},
			calcDate(){
				const cur = new Date()
				this.range = []
				switch (this.tabIndex){
					case 0: //日
						this.content = `${util.dateFormat(this.now)}`;
						// 判断是否显示右侧按钮
						this.showPre = new Date(this.now.getFullYear(), this.now.getMonth(), this.now.getDate()) < new Date(cur.getFullYear(), cur.getMonth(), cur.getDate())
						// 抛出选择日期区间
						this.range.push(util.dateFormat(this.now)) 
						this.range.push(util.dateFormat(this.now)) 
						this.$emit('change', {start: this.range[0],end: this.range[1]});
						break;
					case 1: //周
						// 周几
						const day = this.now.getDay()
						const sDate = new Date(this.now.getFullYear(), this.now.getMonth(), this.now.getDate())
						const eDate = new Date(this.now.getFullYear(), this.now.getMonth(), this.now.getDate())
						// 计算一周的区间
						sDate.setDate(sDate.getDate()-day+1)
						eDate.setDate(eDate.getDate()-day+7)
						this.content = `${util.dateFormat(sDate)} 至 ${util.dateFormat(eDate)}`;
						// 判断是否显示右侧按钮
						this.showPre = new Date(eDate.getFullYear(), eDate.getMonth(), eDate.getDate()) < new Date(cur.getFullYear(), cur.getMonth(), cur.getDate())
						// 抛出选择日期区间
						this.range.push(util.dateFormat(sDate)) 
						this.range.push(util.dateFormat(eDate)) 
						this.$emit('change', {start: this.range[0],end: this.range[1]});
						break;
					case 2: //月
						const nowMouth = this.now.getMonth()
						const nowYear = this.now.getFullYear()
						// 计算一个月的区间
						const sDate2 = new Date(nowYear, nowMouth, 1)
						const eDate2 = new Date(nowYear, nowMouth+1, 0)
						this.content = `${util.dateFormat(sDate2)} 至 ${util.dateFormat(eDate2)}`;
						// 判断是否显示右侧按钮
						this.showPre = new Date(eDate2.getFullYear(), eDate2.getMonth(), eDate2.getDate()) < new Date(cur.getFullYear(), cur.getMonth(), cur.getDate())
						// 抛出选择日期区间
						this.range.push(util.dateFormat(sDate2)) 
						this.range.push(util.dateFormat(eDate2)) 
						this.$emit('change', {start: this.range[0],end: this.range[1]});
						break;
					default:
						break;
				}
			},
			dateChange(e){
				this.range = e
				this.$emit('change', {start: this.range[0],end: this.range[1]});
			}
		}
	}
</script>

<style lang="scss">

</style>
